<!DOCTYPE html>
<html lang="en">
<head>
  
<meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title></title>
  <meta name="viewport" content="initial-scale=1, maximum-scale=1">
  <!-- <link rel="shortcut icon" href="http://favicon.ico"> -->
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="viewport" content="width=device-width, height=device-height, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">


  <!-- <link rel="stylesheet" href="../../css/sm.min.css">
  <link rel="stylesheet" href="../../css/sm-extend.min.css">
  <script type="text/javascript" src="../../common/common.js"></script> -->
  
  <link rel="stylesheet" href="https://gitee.com/huaflower/JinTianGuoJiCommonFile/raw/master/css/sm.min.css">
  <link rel="stylesheet" href="https://gitee.com/huaflower/JinTianGuoJiCommonFile/raw/master/css/sm-extend.min.css">
  <script type="text/javascript" src="https://gitee.com/huaflower/JinTianGuoJiCommonFile/raw/master/common/common.js"></script>
  <style>

  </style>
</head>
<body>
  
  <div class="page-group">
    <div class="page">


          <header class="bar bar-nav">
              <button class="button button-link button-nav pull-left">
                <span class="icon icon-left"></span>
              </button>
              <button class="button button-link button-nav pull-right">
                <span class="icon icon-search"></span>
              </button>
              <h1 class="title">我的收藏</h1>
          </header>


    
          <div class="content" data-type="">
            <div class="buttons-tab fixed-tab" data-offset="44">
              <a href="#tab1" class="tab-link active button">商品</a>
              <a href="#tab2" class="tab-link button">店铺</a>
              <a href="#tab3" class="tab-link button">图片</a>
              <a href="#tab4" class="tab-link button">视频</a>
            </div>

            <div class="tabs">
              <div id="tab1" class="tab active">
                <div class="list-block media-list">
                    <ul>
                      <li>
                        <div class="item-content">
                          <div class="item-media"><img src="http://gqianniu.alicdn.com/bao/uploaded/i4//tfscom/i3/TB10LfcHFXXXXXKXpXXXXXXXXXX_!!0-item_pic.jpg_250x250q60.jpg" style='width: 2.2rem;'></div>
                          <div class="item-inner">
                            <div class="item-title-row">
                              <div class="item-title">商品名城</div>
                            </div>
                          </div>
                        </div>
                      </li>
                      <li>
                          <div class="item-content">
                            <div class="item-media"><img src="http://gqianniu.alicdn.com/bao/uploaded/i4//tfscom/i3/TB10LfcHFXXXXXKXpXXXXXXXXXX_!!0-item_pic.jpg_250x250q60.jpg" style='width: 2.2rem;'></div>
                            <div class="item-inner">
                              <div class="item-title-row">
                                <div class="item-title">商品名城</div>
                              </div>
                            </div>
                          </div>
                      </li>
                      <li>
                          <div class="item-content">
                            <div class="item-media"><img src="http://gqianniu.alicdn.com/bao/uploaded/i4//tfscom/i3/TB10LfcHFXXXXXKXpXXXXXXXXXX_!!0-item_pic.jpg_250x250q60.jpg" style='width: 2.2rem;'></div>
                            <div class="item-inner">
                              <div class="item-title-row">
                                <div class="item-title">商品名城</div>
                              </div>
                            </div>
                          </div>
                      </li>
                      <li>
                          <div class="item-content">
                            <div class="item-media"><img src="http://gqianniu.alicdn.com/bao/uploaded/i4//tfscom/i3/TB10LfcHFXXXXXKXpXXXXXXXXXX_!!0-item_pic.jpg_250x250q60.jpg" style='width: 2.2rem;'></div>
                            <div class="item-inner">
                              <div class="item-title-row">
                                <div class="item-title">商品名城</div>
                              </div>
                            </div>
                          </div>
                      </li>
                    </ul>
                </div>
              </div>
              <div id="tab2" class="tab infinite-scroll">
                  <div class="list-block">
                    <!-- <ul class="list-container">
                      <li class="item-content"><div class="item-inner"><div class="item-title">条目</div></div></li>
                      <li class="item-content"><div class="item-inner"><div class="item-title">条目</div></div></li>
                      <li class="item-content"><div class="item-inner"><div class="item-title">条目</div></div></li>
                      <li class="item-content"><div class="item-inner"><div class="item-title">条目</div></div></li>
                      <li class="item-content"><div class="item-inner"><div class="item-title">条目</div></div></li>
                      <li class="item-content"><div class="item-inner"><div class="item-title">条目</div></div></li>
                      <li class="item-content"><div class="item-inner"><div class="item-title">条目</div></div></li>
                      <li class="item-content"><div class="item-inner"><div class="item-title">条目</div></div></li>
                      <li class="item-content"><div class="item-inner"><div class="item-title">条目</div></div></li>
                      <li class="item-content"><div class="item-inner"><div class="item-title">条目</div></div></li>
                    ....
                      <li class="item-content"><div class="item-inner"><div class="item-title">条目</div></div></li>
                    </ul> -->
                    <ul>
                        <li>
                          <div class="item-content">
                            <div class="item-media"><img src="http://gqianniu.alicdn.com/bao/uploaded/i4//tfscom/i3/TB10LfcHFXXXXXKXpXXXXXXXXXX_!!0-item_pic.jpg_250x250q60.jpg" style='width: 2.2rem;'></div>
                            <div class="item-inner">
                              <div class="item-title-row">
                                <div class="item-title">商品名城</div>
                              </div>
                            </div>
                          </div>
                        </li>
                        <li>
                            <div class="item-content">
                              <div class="item-media"><img src="http://gqianniu.alicdn.com/bao/uploaded/i4//tfscom/i3/TB10LfcHFXXXXXKXpXXXXXXXXXX_!!0-item_pic.jpg_250x250q60.jpg" style='width: 2.2rem;'></div>
                              <div class="item-inner">
                                <div class="item-title-row">
                                  <div class="item-title">商品名城</div>
                                </div>
                              </div>
                            </div>
                        </li>
                        <li>
                            <div class="item-content">
                              <div class="item-media"><img src="http://gqianniu.alicdn.com/bao/uploaded/i4//tfscom/i3/TB10LfcHFXXXXXKXpXXXXXXXXXX_!!0-item_pic.jpg_250x250q60.jpg" style='width: 2.2rem;'></div>
                              <div class="item-inner">
                                <div class="item-title-row">
                                  <div class="item-title">商品名城</div>
                                </div>
                              </div>
                            </div>
                        </li>
                        <li>
                            <div class="item-content">
                              <div class="item-media"><img src="http://gqianniu.alicdn.com/bao/uploaded/i4//tfscom/i3/TB10LfcHFXXXXXKXpXXXXXXXXXX_!!0-item_pic.jpg_250x250q60.jpg" style='width: 2.2rem;'></div>
                              <div class="item-inner">
                                <div class="item-title-row">
                                  <div class="item-title">商品名城</div>
                                </div>
                              </div>
                            </div>
                        </li>
                      </ul>
                  </div>
                  <!-- 加载提示符 -->
                  <div class="infinite-scroll-preloader">
                    <div class="preloader">
                    </div>
                  </div>
              </div>
              <div id="tab3"  class="tab infinite-scroll">
                  <div class="list-block">
                    <!-- <ul class="list-container">
                      <li class="item-content"><div class="item-inner"><div class="item-title">条目</div></div></li>
                      <li class="item-content"><div class="item-inner"><div class="item-title">条目</div></div></li>
                      <li class="item-content"><div class="item-inner"><div class="item-title">条目</div></div></li>
                      <li class="item-content"><div class="item-inner"><div class="item-title">条目</div></div></li>
                      <li class="item-content"><div class="item-inner"><div class="item-title">条目</div></div></li>
                      <li class="item-content"><div class="item-inner"><div class="item-title">条目</div></div></li>
                      <li class="item-content"><div class="item-inner"><div class="item-title">条目</div></div></li>
                      <li class="item-content"><div class="item-inner"><div class="item-title">条目</div></div></li>
                      <li class="item-content"><div class="item-inner"><div class="item-title">条目</div></div></li>
                      <li class="item-content"><div class="item-inner"><div class="item-title">条目</div></div></li>
                    ....
                      <li class="item-content"><div class="item-inner"><div class="item-title">条目</div></div></li>
                    </ul> -->
                    <ul>
                        <li>
                          <div class="item-content">
                            <div class="item-media"><img src="http://gqianniu.alicdn.com/bao/uploaded/i4//tfscom/i3/TB10LfcHFXXXXXKXpXXXXXXXXXX_!!0-item_pic.jpg_250x250q60.jpg" style='width: 2.2rem;'></div>
                            <div class="item-inner">
                              <div class="item-title-row">
                                <div class="item-title">商品名城</div>
                              </div>
                            </div>
                          </div>
                        </li>
                        <li>
                            <div class="item-content">
                              <div class="item-media"><img src="http://gqianniu.alicdn.com/bao/uploaded/i4//tfscom/i3/TB10LfcHFXXXXXKXpXXXXXXXXXX_!!0-item_pic.jpg_250x250q60.jpg" style='width: 2.2rem;'></div>
                              <div class="item-inner">
                                <div class="item-title-row">
                                  <div class="item-title">商品名城</div>
                                </div>
                              </div>
                            </div>
                        </li>
                        <li>
                            <div class="item-content">
                              <div class="item-media"><img src="http://gqianniu.alicdn.com/bao/uploaded/i4//tfscom/i3/TB10LfcHFXXXXXKXpXXXXXXXXXX_!!0-item_pic.jpg_250x250q60.jpg" style='width: 2.2rem;'></div>
                              <div class="item-inner">
                                <div class="item-title-row">
                                  <div class="item-title">商品名城</div>
                                </div>
                              </div>
                            </div>
                        </li>
                        <li>
                            <div class="item-content">
                              <div class="item-media"><img src="http://gqianniu.alicdn.com/bao/uploaded/i4//tfscom/i3/TB10LfcHFXXXXXKXpXXXXXXXXXX_!!0-item_pic.jpg_250x250q60.jpg" style='width: 2.2rem;'></div>
                              <div class="item-inner">
                                <div class="item-title-row">
                                  <div class="item-title">商品名城</div>
                                </div>
                              </div>
                            </div>
                        </li>
                      </ul>
                  </div>
                  <!-- 加载提示符 -->
                  <div class="infinite-scroll-preloader">
                    <div class="preloader">
                    </div>
                  </div>
              </div>
              <div id="tab4" class="tab">
                  <div class="list-block">
                      <!-- <ul class="list-container">
                        <li class="item-content"><div class="item-inner"><div class="item-title">条目</div></div></li>
                        <li class="item-content"><div class="item-inner"><div class="item-title">条目</div></div></li>
                        <li class="item-content"><div class="item-inner"><div class="item-title">条目</div></div></li>
                        <li class="item-content"><div class="item-inner"><div class="item-title">条目</div></div></li>
                        <li class="item-content"><div class="item-inner"><div class="item-title">条目</div></div></li>
                        <li class="item-content"><div class="item-inner"><div class="item-title">条目</div></div></li>
                        <li class="item-content"><div class="item-inner"><div class="item-title">条目</div></div></li>
                        <li class="item-content"><div class="item-inner"><div class="item-title">条目</div></div></li>
                        <li class="item-content"><div class="item-inner"><div class="item-title">条目</div></div></li>
                        <li class="item-content"><div class="item-inner"><div class="item-title">条目</div></div></li>
                      ....
                        <li class="item-content"><div class="item-inner"><div class="item-title">条目</div></div></li>
                      </ul> -->
                      <ul>
                          <li>
                            <div class="item-content">
                              <div class="item-media"><img src="http://gqianniu.alicdn.com/bao/uploaded/i4//tfscom/i3/TB10LfcHFXXXXXKXpXXXXXXXXXX_!!0-item_pic.jpg_250x250q60.jpg" style='width: 2.2rem;'></div>
                              <div class="item-inner">
                                <div class="item-title-row">
                                  <div class="item-title">商品名城</div>
                                </div>
                              </div>
                            </div>
                          </li>
                          <li>
                              <div class="item-content">
                                <div class="item-media"><img src="http://gqianniu.alicdn.com/bao/uploaded/i4//tfscom/i3/TB10LfcHFXXXXXKXpXXXXXXXXXX_!!0-item_pic.jpg_250x250q60.jpg" style='width: 2.2rem;'></div>
                                <div class="item-inner">
                                  <div class="item-title-row">
                                    <div class="item-title">商品名城</div>
                                  </div>
                                </div>
                              </div>
                          </li>
                          <li>
                              <div class="item-content">
                                <div class="item-media"><img src="http://gqianniu.alicdn.com/bao/uploaded/i4//tfscom/i3/TB10LfcHFXXXXXKXpXXXXXXXXXX_!!0-item_pic.jpg_250x250q60.jpg" style='width: 2.2rem;'></div>
                                <div class="item-inner">
                                  <div class="item-title-row">
                                    <div class="item-title">商品名城</div>
                                  </div>
                                </div>
                              </div>
                          </li>
                          <li>
                              <div class="item-content">
                                <div class="item-media"><img src="http://gqianniu.alicdn.com/bao/uploaded/i4//tfscom/i3/TB10LfcHFXXXXXKXpXXXXXXXXXX_!!0-item_pic.jpg_250x250q60.jpg" style='width: 2.2rem;'></div>
                                <div class="item-inner">
                                  <div class="item-title-row">
                                    <div class="item-title">商品名城</div>
                                  </div>
                                </div>
                              </div>
                          </li>
                        </ul>
                    </div>
                    <!-- 加载提示符 -->
                    <div class="infinite-scroll-preloader">
                      <div class="preloader">
                      </div>
                    </div>
              </div>
            </div>
          </div>


      </div>
    </div>





  <!-- 固定的js引用，所有的jQuery 要用 $$ 表示 --> 
<script type="text/javascript" src="https://gitee.com/huaflower/JinTianGuoJiCommonFile/raw/master/js/jquery-1.11.1.min.js"></script>
<!-- 这一行代码是为了 避免js冲突 -->
<script type="text/javascript">var $$ =jQuery.noConflict();</script>

<script type='text/javascript' src='https://gitee.com/huaflower/JinTianGuoJiCommonFile/raw/master/zepto/zepto.min.js' charset='utf-8'></script>
<script type='text/javascript' src='https://gitee.com/huaflower/JinTianGuoJiCommonFile/raw/master/js/sm.min.js' charset='utf-8'></script>
<!-- <script type='text/javascript' src='https://gitee.com/huaflower/JinTianGuoJiCommonFile/raw/master/js/sm-extend.min.js' charset='utf-8'></script> -->
<script src="https://gitee.com/huaflower/JinTianGuoJiCommonFile/raw/master/js/swiper/swiper.min.js"></script>
<script type="text/javascript">
  

  //放函数区域
  $(document).on("pageInit", function() {
      //多个标签页下的无限滚动
      var loading = false;
      // 每次加载添加多少条目
      var itemsPerLoad = 20;
      // 最多可加载的条目
      var maxItems = 100;
      var lastIndex = $('.list-container li')[0].length;
      function addItems(number, lastIndex) {
        // 生成新条目的HTML
        var html = '';
        for (var i = lastIndex + 1; i <= lastIndex + number; i++) {
          html += '<li class="item-content" onClick="alert(1)"><div class="item-inner"><div class="item-title">新条目</div></div></li>';
        }
        // 添加新条目
        $('.infinite-scroll.active .list-container').append(html);
      }
      $('.page').on('infinite', function() {
        // 如果正在加载，则退出
        if (loading) return;
        // 设置flag
        loading = true;
        var tabIndex = 0;
        if($(this).find('.infinite-scroll.active').attr('id') == "tab2"){
          tabIndex = 0;
        }
        if($(this).find('.infinite-scroll.active').attr('id') == "tab3"){
          tabIndex = 1;
        }
        lastIndex = $('.list-container').eq(tabIndex).find('li').length;
        // 模拟1s的加载过程
        setTimeout(function() {
          // 重置加载flag
          loading = false;
          if (lastIndex >= maxItems) {
            // 加载完毕，则注销无限加载事件，以防不必要的加载:$.detachInfiniteScroll($('.infinite-scroll').eq(tabIndex));多个无线滚动请自行根据自己代码逻辑判断注销时机
            // 删除加载提示符
            $('.infinite-scroll-preloader').eq(tabIndex).hide();
            return;
          }
          addItems(itemsPerLoad,lastIndex);
          // 更新最后加载的序号
          lastIndex =  $('.list-container').eq(tabIndex).find('li').length;
          $.refreshScroller();
        }, 1000);
      });
  });




  //需要初始化传递数据的函数，函数名，跟参数都不要变，固定写死的
  function getParams(data){
   // data需要转成json调用 ，函数urlParamParseJson();
     /*var jodata = JSON.parse(data); 
     if(isNotNull(jodata)){//
        
     }*/
     if(isNotNull(data)){
        // $$("#div_version").html("版本号：V"+data);
     }
  }

  // function getData(){
  //   var params = {}
  //   net_request('get','api/v1/mallproducts',params,successCallBack,errorCallBack);
  //   $.toast('开清请求接口');
  // }

    // 初始化
    $(function(){

      // getData();

      $.init();
    });
  </script>
</body>
</html>